// 该文件专门用于创建整个应用的路由器

import VueRouter  from "vue-router";
//  创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: () => import('../pages/About.vue'),
        },
        {
            path: '/home',
            component: ()=> import('../pages/Home.vue'),
            children: [
                {
                    path: 'news',
                    component: () => import('../pages/News.vue'),
                },
                {
                    path: 'msg',
                    component: () => import('../pages/Message.vue'),
                    children: [
                        {
                            name: 'xiangqin',
                            path: "detail",
                            component: () => import('../pages/Detail.vue'),
                            //props第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            } ,
                            //解构赋值写法
                            // props({query:{id,title}}) {
                            //     return {
                            //         id ,
                            //         title
                            //     }
                            // }
                        },
                        // {
                        //     name: 'xiangqin',
                        //     path: "detail/:id/:title",
                        //     component: () => import('../pages/Detail.vue'),
                        //     //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                        //     // props: {
                        //     //     a: 1,
                        //     //     b: 'aaa'
                        //     // },
                        //     //props的第一种写法，值为布尔值,如果为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                        //     props: true
                        // }
                    ]
                }
            ]
        },
    ]
})